<template>
    <!-- 基金 -->
    <div class="madp-financial-detail">
        <div class="header">
            <div class="head_con">
                <div class="title">
                    {{ prodInfo.name }}
                </div>
                <div class="type">
                    <div>{{ prodInfo.code }}</div>
                    <div>{{ IsTextRisk(prodInfo.riskLevel) }}</div>
                    <div>{{ AttrTxt(prodInfo.prdAttr) }}</div>
                    <div>{{ format_money(prodInfo.pFirstAmt) }}元起购</div>
                </div>
                <div class="head_info" v-if="prodInfo.prdAttr == 4">
                    <div class="info_first">
                        <div :class="prodInfo.yield && prodInfo.yield.indexOf('-') != -1 ? 'left_color2' : 'left_color1'">
                            <span>{{ format_money_decimal_qiri_jingdu(prodInfo.yield > 0 ? prodInfo.yield : '0.00', true) }}</span
                            >%
                        </div>
                        <div>七日年化收益率</div>
                    </div>
                    <div class="info_second">
                        <div>
                            <span>{{ prodInfo.FundIncomeUnit ? format_money_decimal_qiri_jingdu(prodInfo.FundIncomeUnit, true) : '0.00' }}</span>
                        </div>
                        <div>万份收益（{{ prodInfo.NavDate ? formattingDate(prodInfo.NavDate) : '00-00-00' }}）</div>
                    </div>
                </div>
                <div class="head_info" v-else>
                    <div class="info_first">
                        <div :class="prodInfo.dayRate && prodInfo.dayRate.indexOf('-') != -1 ? 'left_color2' : 'left_color1'">
                            <span>{{ format_money_decimal_jingdu(prodInfo.dayRate, true) }}</span
                            >%
                        </div>
                        <div>日涨跌幅</div>
                    </div>
                    <div class="info_second">
                        <div :class="prodInfo.yearRate && prodInfo.yearRate.indexOf('-') != -1 ? 'left_color2' : 'left_color1'">
                            <span>{{ format_money_decimal_jingdu(prodInfo.yearRate, true) }}</span
                            >%
                        </div>
                        <div>近一年涨跌幅</div>
                    </div>
                    <div class="info_third">
                        <div>{{ format_money_decimal_jingzhi(prodInfo.nav, true) }}</div>
                        <div>最新净值({{ prodInfo.navDate && prodInfo.navDate.split(' ')[0] }})</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="unit_value" v-if="tableData.length > 0">
            <div class="unit_value_title">
                <div>单位净值</div>
            </div>
            <div id="echart-unit-value"></div>
            <div class="unit_value_table">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="navDate" label="日期"> </el-table-column>
                    <el-table-column prop="nav" label="单位净值" width="100px" align="right"> </el-table-column>
                </el-table>
            </div>
            <p class="unit_value_more" @click="getMoreValue">查看更多 <i class="el-icon-arrow-right"></i></p>
        </div>
        <div class="trading_rules">
            <div class="rules_title">交易规则</div>
            <div class="rules_steps">
                <div>
                    <img src="@/assets/img/financialShop/red_o.png" alt="" />
                </div>
                <div class="rule_line"></div>
                <div>
                    <img src="@/assets/img/financialShop/red_o.png" alt="" />
                </div>
                <div class="rule_line"></div>
                <div>
                    <img src="@/assets/img/financialShop/red_o.png" alt="" />
                </div>
            </div>
            <div class="step_text">
                <div class="text_left">
                    <div>T日</div>
                    <div>买入提交</div>
                </div>
                <div class="text_center">
                    <div>T+1日</div>
                    <div>确认份额</div>
                </div>
                <div class="text_right">
                    <div>T+2日</div>
                    <div>查看盈亏</div>
                </div>
            </div>
            <div class="step_uu">具体时间以基金公司确认为准</div>
        </div>
        <div class="fund_file">
            <div class="file_title">基金档案</div>
            <div class="file_content">
                <div>基金公司</div>
                <div>{{ prodInfo.taName }}</div>
            </div>
            <div class="file_content" v-if="prodInfo.url">
                <div>基金产品概要</div>
                <div @click="handleView">查看 <i class="el-icon-arrow-right"></i></div>
            </div>
        </div>
        <div class="warm_prompt btm_warm">
            <div class="prompt_title">温馨提示</div>
            <div class="prompt_text">
                <div>1.</div>
                <div>
                    基金定投（简称定投）是我行为了方便客户进行基金投资而接受客户购买基金的申请，并由华融湘江银行基金代销系统按照客户所确定的时限和金额要求对指定的基金产品实施购买计划的服务功能。
                </div>
            </div>
            <div class="prompt_text">
                <div>2.</div>
                <div>基金公司制定基金费率标准并收取相应手续费。</div>
            </div>
            <div class="prompt_text">
                <div>3.</div>
                <div>了解基金业务基础知识。</div>
            </div>
            <div class="prompt_text">
                <div>4.</div>
                <div>了解我行授权基金销售网点及销售人员信息。</div>
            </div>
        </div>
        <div class="warm_prompt">
            <div class="prompt_title">风险提示</div>
            <div class="prompt_text">
                <div>1.</div>
                <div>如有销售人员介入进行营销推介，请停止本自助终端购买操作，转至本行网点销售专区内购买。</div>
            </div>
        </div>
        <share-btn :shareInfo="shareInfo" />
        <back-btn />
        <div class="explain_rate">申购费率：具体以我行手机银行为准</div>
        <buy-btn :prodInfo="prodInfo" prodType="2" btnText="购买" />
    </div>
</template>
<script>
    import financialShopApi from '@/api/financial-shop';
    import { IsTextRisk, AttrTxt, format_money, format_money_decimal_jingdu, format_money_decimal_jingzhi, formattingDate, format_money_decimal_qiri_jingdu } from '@/utils/financial-utils';
    import buyBtn from '@/components/buy-btn';
    import shareBtn from '@/components/share-btn';
    import backBtn from '@/components/back-btn.vue';
    import mxInitWxConfig from '@/mixin/mxInitWxConfig.js';
    import * as echarts from 'echarts';
    export default {
        name: 'madp-financial-detail',
        components: { buyBtn, shareBtn, backBtn },
        mixins: [mxInitWxConfig],
        data() {
            return {
                shareInfo: {},
                prodInfo: {},
                isUpdateChart: false,
                xData: [], // 单位净值 X轴显示
                seriesData: [], // 单位净值 数据显示
                tableData: []
            };
        },
        activated() {
            this.prodId = this.$route.query.id;
            this.getProdInfo();
            this.getUnitValue();
        },
        methods: {
            IsTextRisk,
            AttrTxt,
            format_money,
            format_money_decimal_jingdu,
            format_money_decimal_jingzhi,
            formattingDate,
            format_money_decimal_qiri_jingdu,
            getProdInfo() {
                financialShopApi
                    .getFundProductDetail({
                        id: this.prodId
                    })
                    .then((res) => {
                        this.prodInfo = res.data.data;
                        this.$forceUpdate();
                        this.shareInfo = {
                            title: this.prodInfo.name || '基金产品', // 分享标题
                            desc: `通过华融湘江银行手机银行，购买${this.prodInfo.name},最新净值${this.format_money_decimal_jingzhi(this.prodInfo.nav, true)}`, // 分享描述
                            link: this.$utils.getShareUrl(), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: `${this.$utils.apiUrl}/mfs/avatar.jpg`
                        };
                        this.$wxShare.setShareInfo(this.shareInfo);
                        let { code, name, reserve1, cycleDays, taCode, prdTemplate, productDate } = this.prodInfo;
                        // 判断投资期限
                        let buy_period = '';
                        if ((reserve1 == '1301' && cycleDays) || reserve1 != '1301') {
                            if (taCode == 'Y5') {
                                buy_period = String(taCode);
                            } else if (prdTemplate == '1' && ['1700', '1309'].includes(reserve1)) {
                                buy_period = '灵活申赎';
                            } else if (reserve1 == '1301' && cycleDays) {
                                buy_addXDataperiod = '每' + String(cycleDays) + '天开放';
                            } else if (reserve1 == '1401') {
                                buy_period = '每月开放';
                            } else if (!['1', '2'].includes(prdTemplate)) {
                                buy_period = String(productDate);
                            }
                        }
                        console.log('id', this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId);
                        this.$sensorsSend('FinancialView', {
                            from_page_name: sessionStorage.getItem('from_page_name') || '',
                            recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                            financial_type: '基金',
                            financial_code: code,
                            financial_name: name,
                            buy_period
                        });
                    });
            },
            getUnitValue() {
                financialShopApi
                    .getProductUnitValue({
                        id: this.prodId
                    })
                    .then((res) => {
                        if (res.data.code != 0) return;
                        let list = res.data.data;
                        if (list.length == 0) {
                            this.totalTableData = [];
                            this.tableData = [];
                            return;
                        }
                        this.totalTableData = list.reverse();
                        this.tableData = this.totalTableData.slice(0, 3);
                        let { xData, seriesData } = this.getEchartData(list);
                        this.xData = xData;
                        this.seriesData = seriesData;
                        this.$nextTick(() => {
                            if (this.tableData.length > 0) {
                                this.initChart();
                            }
                        });
                    });
            },
            // 获取echart 需要的数据结构
            getEchartData(list) {
                let xData = [];
                let seriesData = [];
                list.map((i) => {
                    xData.push(i.navDate);
                    seriesData.push(i.nav);
                });
                return { xData, seriesData };
            },

            initChart() {
                let myChart = echarts.init(document.getElementById('echart-unit-value'));
                myChart.setOption({
                    tooltip: {
                        triggerOn: "'mousemove|click'",
                        alwaysShowContent: true,
                        position: function (pt) {
                            return [0, 0];
                        },
                        extraCssText: 'width:100%;height:30px;display:flex;justify-content:space-between;box-sizing:border-box',
                        formatter: `<p style='position:relative;top:-6px;font-size:12px'>{b}</p>` + `<p style='position:relative;top:-6px;font-size:12px'>单位净值:{c}</p>`,
                        backgroundColor: 'rgba(252,130,63,0.2)',
                        borderWidth: 0
                    },
                    grid: {
                        top: '50px',
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.xData,
                        axisPointer: {
                            show: true,
                            type: 'line',
                            lineStyle: {
                                type: 'solid'
                            },
                            triggerTooltip: true,
                            label: {
                                show: true,
                                formatter: function (params) {
                                    return params.value;
                                },
                                backgroundColor: 'rgba(112,123,124,0.8)'
                            },
                            handle: {
                                show: true,
                                color: 'rgba(255, 255, 255, 1)',
                                size: [0, 0]
                            }
                        }
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: {
                        data: this.seriesData,
                        type: 'line',
                        smooth: true,
                        showSymbol: true,
                        color: '#FC823F',
                        lineStyle: {
                            color: '#FC823F',
                            width: 4
                        },
                        areaStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(252, 130, 63, 0.1)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(252, 130, 63, 0)' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            }
                        }
                    }
                });
                this.$nextTick(() => {
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: this.xData.length - 1
                    });
                });
            },
            getMoreValue() {
                this.$store.commit('setFundUnitValueList', this.totalTableData);
                this.$router.push({
                    path: '/financialShop/financial-fund-unit-detail',
                    query: {
                        id: this.prodId
                    }
                });
            },
            handleView() {
                sessionStorage.setItem('wxUserId', this.$route.query.wxUserId);
                sessionStorage.setItem('wxExternalUserid', this.$route.query.wxExternalUserid);
                window.location.href = this.prodInfo.url;
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-financial-detail {
        width: 100%;
        min-height: 100vh;
        // overflow-y: scroll;
        background-image: url('../../assets/img/financialShop/bg_top_short.png');
        background-position: 0% 0%;
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: rgb(239, 239, 239);
        padding-top: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        .header {
            padding: 12px 16px;
            color: #2c2c2c;
            .head_con {
                height: 169px;
                padding: 18px 16px;
                background: #fff;
                border-radius: 8px;
                .title {
                    font-size: 16px;
                    font-weight: bold;
                }
                .type {
                    display: flex;
                    margin-top: 9px;
                    line-height: 16px;
                    font-size: 10px;
                    div {
                        margin-left: 4px;
                        height: 18px;
                        line-height: 18px;
                        padding: 0 4px;
                        background: rgba(252, 211, 174, 0.2);
                        border-radius: 2px;
                        color: #ab7e5a;
                    }
                    div:first-child {
                        margin: 0;
                        font-size: 14px;
                        padding: 0;
                        background: none;
                        color: rgba(44, 44, 44, 0.5);
                    }
                }
                .head_info {
                    display: flex;
                    margin-top: 17px;
                    justify-content: space-between;
                    align-items: flex-end;
                    .info_first {
                        div:first-child {
                            font-size: 20px;
                            font-weight: bold;
                            span {
                                font-size: 32px;
                            }
                        }
                        div:last-child {
                            font-size: 12px;
                            color: rgba(44, 44, 44, 0.5);
                        }
                    }
                    .info_second {
                        div:first-child {
                            font-size: 14px;
                            font-weight: bold;
                            span {
                                font-size: 20px;
                            }
                        }
                        div:last-child {
                            font-size: 12px;
                            color: rgba(44, 44, 44, 0.5);
                        }
                    }
                    .left_color1 {
                        color: #ed5555;
                    }
                    .left_color2 {
                        color: #5ba764;
                    }
                    .info_third {
                        div:first-child {
                            font-size: 20px;
                        }
                        div:last-child {
                            font-size: 12px;
                            color: rgba(44, 44, 44, 0.5);
                        }
                    }
                }
            }
        }
        .unit_value {
            margin-top: 10px;
            background: #fff;
            color: #2c2c2c;
            padding: 0 16px 20px;
            &_title {
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bold;
            }
            &_table {
                margin: 10px 0;
            }
            &_more {
                text-align: center;
                font-size: 14px;
            }
        }
        .trading_rules {
            margin-top: 10px;
            background: #fff;
            color: #2c2c2c;
            padding: 0 16px 20px;
            .rules_title {
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bold;
            }
            .rules_steps {
                display: flex;
                align-items: center;
                .rule_line {
                    width: 147px;
                    height: 2px;
                    margin-bottom: 6px;
                    border-radius: 100px;
                    background: rgba(237, 85, 85, 0.2);
                }
                img {
                    width: 28px;
                    height: 28px;
                }
            }
            .step_text {
                display: flex;
                justify-content: space-between;
                font-size: 12px;
                .text_left {
                    div:first-child {
                        color: rgba(44, 44, 44, 0.5);
                    }
                }
                .text_center {
                    text-align: center;
                    div:first-child {
                        color: rgba(44, 44, 44, 0.5);
                    }
                }
                .text_right {
                    text-align: right;
                    div:first-child {
                        color: rgba(44, 44, 44, 0.5);
                    }
                }
            }
            .step_uu {
                margin-top: 12px;
                font-size: 12px;
                color: rgba(44, 44, 44, 0.5);
            }
        }
        .fund_file {
            margin-top: 10px;
            background: #fff;
            padding: 0 16px;
            color: #2c2c2c;
            .file_title {
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                font-weight: bold;
            }
            .file_content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 35px;
                font-size: 14px;
                div:first-child {
                    color: #90959a;
                    width: 150px;
                }
                img {
                    width: 12px;
                    height: 12px;
                }
            }
        }
        .warm_prompt {
            margin-top: 32px;
            padding: 0 16px 132px;
            color: #878787;
            font-size: 10px;
            .prompt_title {
                font-size: 12px;
                height: 30px;
                line-height: 30px;
            }
            .prompt_text {
                display: flex;
                line-height: 22px;
                span {
                    color: #2c2c2c;
                }
                img {
                    width: 8px;
                    height: 8px;
                }
            }
        }
        .btm_warm {
            padding: 0 16px 0;
        }
        .explain_rate {
            position: fixed;
            bottom: 0;
            width: 100%;
            color: #2c2c2c;
            font-size: 12px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: rgba(255, 239, 239, 0.9);
            margin-left: 4px;
        }
    }
    #echart-unit-value {
        width: 100%;
        height: 260px;
        margin: 0 auto;
        padding: 0;
        margin: 0;
    }
</style>
